<template>
  <div id="left1"> 
    <div class="leftChart" style="width:400px;height:230px;margin:0 auto" ref="leftChart">

    </div>
  </div>
</template>

<script type="text/javascript">

  import * as echarts from 'echarts'

  export default {

    name: "",
    components: {
    },
    props:['echartData'],
    data() {
      return {
        allNum: 503,
        pieData: [],
        mapChart: null,
        option: null,
        timer: null,
        timer1: null,

      }
    },
    mounted() { 
        this.allNum=0
        this.pieData=this.echartData.map(v=>{
          this.allNum+=v.retailSalesOnline
          return{
            name:v.cityName,
            value:v.retailSalesOnline
          }
        })
      this.$nextTick(() => {
       
        
        this.draw();
        // this.timer = setInterval(() => {
        this.doing();
        // }, 200);
         
      });
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    },
    methods: {
      draw() {
        this.mapChart = echarts.init(this.$refs.leftChart)
        this.option = {
          tooltip: {
            trigger: 'item'
          },
          
          title: {
                text: ["{value|" + this.allNum + "}", "{name|订单总数(单)}"].join("\n"),
                top: "center",
                left: "center", 
                textStyle: {
                  rich: {
                    value: {
                      fontSize: 22,
                      color: "#fff",
                      fontWeight: 600,
                      fontStyle: 'oblique',
                      fontWeight: "bold",
                      lineHeight: 20,
                    },
                    name: {
                      fontSize: 12,
                      color: "#fff",
                      padding:[5,0,0,0]
                    },
                  },
                },
              },
          series: [
            {
              name: '网络零售额',
              type: 'pie',
              radius: ['42%', '65%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              minAngle: 15,//最小角度
              startAngle: 270, //起始角度
              itemStyle: {
                borderRadius: 10,
                borderWidth: 10, //设置border的宽度有多大
                borderColor: '#0B1C30',
                // backgroundColor:'#0B192D'
              },
              label: {
                normal: {
                  alignTo: 'edge', // label两端对称布局
                  //  ECharts v4.6.0 版本起，提供了 'labelLine' 与 'edge' 两种新的布局方式
                  margin: 0, // 布局为两端对称时候需要外边距防止图表变形 数值随意不要太大
                  // distanceToLabelLine:-30, // label距离引导线距离
                  formatter: '{value|{b}}{abg|}\n{hr|}\n{name|{d}%}',
                  padding: 5,
                  rich: {
                    value: {
                      color: '#fff',
                      lineHeight: 18,
                      fontSize: 12
                    },
                    hr: { height: 10 },
                    name: {
                      fontSize: 14,
                      lineHeight: 18,
                      color: '#00FFFD',
                      fontStyle: 'oblique'
                    }
                  },
                  distanceToLabelLine: 0
                }
              },
              labelLine: {
                //  length:15,
                length2: 300,
                lineStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                // label: {
                //   show: true,
                //   fontSize: '40',
                //   fontWeight: 'bold'
                // }
              },
              data: this.pieData,
            },
            {
              type: 'pie',
              zlevel: 2,
              silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
              startAngle: 360,
              radius: ['45%', '50%'],
              center: ['50%', '50%'],
              label: { show: false },
              labelLine: { show: false },
              itemStyle: {
                borderRadius: 1,
                borderWidth: 2, //设置border的宽度有多大
                borderColor: '#0B1C30',
                // backgroundColor:'#0B192D'
              },
              data: this._pie(),
              animation: false, //是否开启动画
            }
          ]
        };
      },
      _pie() {
        let dataArr = [];
        for (var i = 0; i < 50; i++) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 60,
            itemStyle: {
              color: '#3D7580',
            },
          });
        }
        return dataArr;
      },
      doing() {
        // this.option.series[2].startAngle = this.option.series[2].startAngle + 5;
        this.mapChart.setOption(this.option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  
</style>